<template>
  <view class="rePair_detail">
    <view class="navbar">
      <global-nav-bar @setHeight="setHeight" left-icon="back" :title="title" :fixed="false" backgroundColor="#2C2C2C"
        color="#fff"></global-nav-bar>
    </view>
    <!-- 中间部分 -->
    <view class="content_box">
      <!-- 电梯信息 -->
      <view class="content_item eleInfo">
        <!-- <view class="title">电梯信息</view> -->
        <view class="top">
          <view class="top_left">{{ elevatorDetail.buildingName || "" }}-{{
            elevatorDetail.elevatorAddress || ""
          }}</view>
          <view>{{ elevatorDetail.buildingAddress || "" }} </view>
        </view>
        <image :src="approveList[workOrderDetail.approveStatus].url"> </image>
      </view>
      <view class="progressBar">
        <view class="progressBar_content" v-if="workOrderDetail.approveStatus == 2">
          <!-- <view class="title" style="font-size: 32rpx;padding-bottom: 20rpx;">维修进度</view> -->
          <view class="planEndTime" v-if="workOrderDetail.status == 3 && workOrderDetail.preTime">
            <view>预计维修结束时间</view>
            <view>
              <text>{{ workOrderDetail.preTime[0] }}</text>
              <text>
                {{ workOrderDetail.preTime[1] }}
              </text>
            </view>
          </view>
          <view class="progressBar_item">
            <stautsStep :actIndex="[-1, 0, 1, 2, 1, 2, 3][status - 1]" :list="options" :log="logs">
            </stautsStep>
          </view>
        </view>
      </view>
      <view class="content_item" v-if="planDetail.users && planDetail.users.length">
        <view class="userBox">
          <view class="title">{{ workOrderDetail.status == 3 ? "维保员" : "维修人" }}
          </view>
          <view @click="goTaskSetpPage">任务跟踪详情
            <uni-icons type="forward" size="16"></uni-icons>
          </view>
        </view>
        <user-list :list="planDetail.users"></user-list>
      </view>

      <view class="content_item task_item">
        <view class="title">任务信息</view>
        <view class="falutItem">
          <view class="label">任务类型</view>
          <view class="normal status" v-if="workOrderDetail.workOrderTypeName">
            {{ workOrderDetail.workOrderTypeName }}
          </view>
          <view class="normal status" v-if="workOrderDetail.sourcePlanTypeName">
            {{ workOrderDetail.sourcePlanTypeName }}
          </view>
        </view>
        <view class="falutItem">
          <view class="label">紧急程度</view>

          <text class="status tag" v-for="(item, index) in btnBoxList" :key="index"
            v-show="item && workOrderDetail.emerProcType == item.key"
            :style="{ color: item.color, borderColor: item.color }">
            {{ item.label }}
          </text>

        </view>
        <view class="falutItem">
          <view class="label">报障电梯状态</view>
          <view v-if="workOrderDetail.elevatorStop != null" :class="[
            'status',
            workOrderDetail.elevatorStop === 1 ? 'normal' : 'stops',
          ]">
            {{ workOrderDetail.elevatorStop == 1 ? "正常运行" : "停梯" }}
          </view>
        </view>
        <view class="falutItem">
          <view class="label">计划执行时间</view>
          <view v-if="planDetail.planDate != null">{{
            planDetail.planDate || "--"
          }}</view>
        </view>
        <view class="falutItem">
          <view class="label">计划完成时间</view>
          <view v-if="workOrderDetail.elevatorStop != null">{{
            planDetail.planFinishDate || "--"
          }}</view>
        </view>
      </view>
      <view class="message" v-for="(item, index) in workOrderDetail.faultMessageList" :key="index">
        <view class="des">
          <view class="flexBox">
            <view class="title" v-if="item.partsName">故障部件
              <view class="serial-num">{{
                workOrderDetail.faultMessageList[0].problemItemNames
                  ? index
                  : index + 1
              }}</view>
            </view>
            <view class="title" v-else>故障现象</view>
            <!--
            <view class="reportingName" @click="callPhone(item)">
              <text>报障人:</text>
              <image src="@/static/images/callPhone.png" style="width: 32rpx; height: 32rpx;margin-top: 6rpx;"></image>
              <text style="color: #0091ff;width:80rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                {{ item.name }}
              </text>
            </view>
            -->
          </view>
          <view class="desItem">
            <view class="flexBox">
              <view class="title_desc" :style="{
                paddingTop:
                  item.problemItemNames && item.problemItemNames.length > 0
                    ? '4rpx'
                    : item.partsName
                      ? '0'
                      : '4rpx',
              }">{{
                  item.problemItemNames && item.problemItemNames.length > 0
                    ? "故障现象"
                    : item.partsName
                      ? "故障部件"
                      : "故障现象"
                }}</view>
            </view>
            <view class="flex-line-right descBox partName" v-if="item.partsName">
              <view>
                {{ item.partsName }}
                <text v-if="item.floorStandNames">({{ item.floorStandNames.replaceAll(',', '>') }})</text>
              </view>
            </view>
            <view class="descBox noPadding" v-else>
              <view class="status_content">
                <view :class="['status', 'normal']" v-for="(it, i) in item.problemItemNames" :key="i">
                  {{ it }}
                </view>
              </view>
            </view>
          </view>
          <view class="descBox" v-if="
            item.problemItemNames && item.problemItemNames.includes('其他')
          ">
            <view class="title">其他现象</view>
            <view class="content">{{ item.problemOtherDesc }}</view>
          </view>
          <view class="descBox otherBox" v-if="item.mfDesc">
            <view class="title">故障描述</view>
            <view>
              <text class="content" v-if="showDescBtn">{{ item.mfDesc }}</text>
              <text class="content noWrap" v-else>{{
                JSON.stringify(item.mfDesc)
                  .split("\\n")
                  .slice(0, 2)
                  .join("\n")
                  .slice(1)
              }}</text>
              <view class="college" v-if="showDesc(item)" @click="showDescBtn = !showDescBtn">
                {{ showDescBtn ? "收起" : "展开" }}
              </view>
            </view>
          </view>
          <view class="descBox" v-if="item.mfImgUrl && item.mfImgUrl.length">
            <view class="title">故障图片</view>
            <view><image-drag-sort :disabled="true" :list="item.mfImgUrl"></image-drag-sort></view>
          </view>
          <view class="flex-line descBox">
            <view class="flex-line-left title">创建人</view>
            <view class="flex-line-right content"><text>{{ item.createUserName }}</text>
              <text>{{
                item.msgCreateTime || "--"
              }}</text>
            </view>
          </view>
          <!-- 去掉处理结果 -->
          <view class="descBox" v-if="item.partsName && false">
            <view class="repari_result" v-if="item.faultImg && item.faultImg.length && item.more">
              <view class="top">
                <view>处理结果</view>
                <view class="handle">
                  <view class="handle_item">
                    <view v-if="workOrderDetail.updateStatus" @click="addReason(index, item, 1)" class="editBtn">
                      <image src="@/static/images/edit2.png" mode=""></image>
                    </view>
                    <view v-if="workOrderDetail.updateStatus" @click="handleDel(item)" class="delBtn">
                      <image src="@/static/images/del.png" mode=""></image>
                    </view>
                  </view>
                </view>
              </view>
              <view class="descBox" v-if="item.faultImg && item.faultImg.length">
                <view class="title">故障正常运行图片/视频</view>
                <image-drag-sort :max="9" :list="item.faultImg" :disabled="true">
                </image-drag-sort>
              </view>
              <view class="descBox" v-if="
                item.faultReasonItemNames && item.faultReasonItemNames.length
              ">
                <view class="title reson">故障原因</view>
                <view class="status_content">
                  <view :class="['status', 'stops']" v-for="(it, i) in item.faultReasonItemNames" :key="i">
                    {{ it }}
                  </view>
                </view>
              </view>
              <view class="descBox" v-if="item.faultReasonOtherDesc">
                <view class="title">其他故障原因</view>
                <view class="content">{{ item.faultReasonOtherDesc }}</view>
              </view>
              <view class="descBox" v-if="item.faultDesc">
                <view class="title">故障说明</view>
                <view class="content">{{ item.faultDesc }}</view>
              </view>

              <view class="member" v-if="
                item.malfunctionRecordVO &&
                item.malfunctionRecordVO.length > 0
              ">
                <text>记录人:</text>
                <view class="memberBox">
                  <view v-for="(it, idx) in item.isShowMore
                    ? item.malfunctionRecordVO
                    : item.malfunctionRecordVO.slice(0, 1)" :key="idx">
                    <text>{{ it.userName }}</text>
                    <text>{{ it.updateTime }}</text>
                    <text>{{ it.recordLog }}</text>
                  </view>
                </view>
                <text v-if="
                  item.malfunctionRecordVO &&
                  item.malfunctionRecordVO.length > 1
                " class="more" @click="resultShowMore(item)">
                  {{ item.isShowMore ? "收起" : "展开" }}
                </text>
              </view>
            </view>
            <view class="moreBox" v-if="item.faultImg">
              <text :style="item.more
                  ? 'transform:rotate(135deg);transition: 0.3s all;margin-top:10rpx;'
                  : 'transition: 0.3s all;transform:rotate(-45deg);margin-bottom:10rpx;'
                " class="icon"></text>
              <text @click="ShowMore(item, index)">{{ item.more ? "收起处理结果" : "展开处理结果" }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="content_item repter" v-if="workOrderDetail.faultReportVO">
        <view class="faultReasonContent">
          <view class="title">报障信息</view>
          <view class="faultReasonItem flex-line">
            <view class="label flex-line-left">报障人</view>
            <view class="flex-line-right">{{
              workOrderDetail.faultReportVO.name || "--"
            }}</view>
          </view>
          <view class="faultReasonItem">
            <view class="label flex-line-left">报障电话</view>
            <view class="flex-line-right" @click="
              callPhone({
                name: workOrderDetail.faultReportVO.name,
                phone: workOrderDetail.faultReportVO.phone,
              })
              ">
              <text>{{ workOrderDetail.faultReportVO.phone || "--" }}</text>
            </view>
          </view>
          <view class="faultReasonItem flex-line">
            <view class="label flex-line-left">报障渠道</view>
            <view class="flex-line-right">{{
              workOrderDetail.faultReportVO.planFromName || "--"
            }}</view>
          </view>
          <view class="faultReasonItem flex-line">
            <view class="label flex-line-left">报障单位</view>
            <view>{{
              workOrderDetail.faultReportVO.faultCompany || "--"
            }}</view>
          </view>
          <view class="faultReasonItem flex-line">
            <view class="label flex-line-left">报障时间</view>
            <view class="flex-line-right">{{
              workOrderDetail.faultReportVO.createTime || "--"
            }}</view>
          </view>
        </view>
      </view>
      <view class="content_item relust" v-if="showTextVal && status > 0">
        <view class="faultReasonContent">
          <view class="title">处理反馈</view>
          <view class="textare-content" :style="textValEdit ? '' : 'border:2rpx solid #fff'">
            <view v-show="!textValEdit">
              {{ textVal }}
            </view>
            <view class="user-block" v-show="!textValEdit && textVal" v-if="workOrderDetail.faultFeedbackVO">
              {{ workOrderDetail.faultFeedbackVO.remarkUpdateUserName }}
              <text>{{
                workOrderDetail.faultFeedbackVO.updateTime
              }}</text>
            </view>
            <textarea v-show="textValEdit" :disabled="!isUpdata" maxlength="300" v-model="textVal"></textarea>
            <view v-show="textValEdit" class="textare-content-length">{{ textVal.length }}/300</view>
          </view>
          <view class="edit-block" v-if="myApply != 1 && status < 2 && isUpdata">
            <view class="" @click="reTextVal" v-if="textValEdit">
              <view v-if="!firstTextEdit" class="editIcon">
                <uni-icons type="close" size="26rpx" color="#999999"></uni-icons>
                取消
              </view>
            </view>
            <view class="editVal" @click="updataTextVal" v-if="!textValEdit">
              <image src="/static/images/edit.png"></image>
              编辑
            </view>
            <text v-if="!firstTextEdit">|</text>

            <view class="editVal" @click="saveTextVal" v-if="textValEdit">
              <image src="/static/images/save.png"></image>
              保存
            </view>
            <view class="editVal saveVal " @click="removeText" v-if="!textValEdit">
              <image src="/static/images/delete.png"></image>
              删除
            </view>
          </view>
        </view>
      </view>

      <!-- S-故障关闭原因 -->
      <view class="content_item closeBox" v-if="
        workOrderDetail.faultMessageList &&
        workOrderDetail.faultMessageList.length > 0 &&
        workOrderDetail.faultMessageList[0].closeDesc
      ">
        <view class="faultReasonContent">
          <view class="title">关闭原因</view>
          <view class="close_desc">
            <view class="close_desc_item">
              {{ workOrderDetail.faultMessageList[0].closeDesc }}
            </view>
            <view class="close_desc_cont">{{
              workOrderDetail.faultMessageList[0].closeUserName +
              " " +
              workOrderDetail.faultMessageList[0].updateTime
            }}
            </view>
          </view>
        </view>
      </view>
      <!-- E-故障关闭原因 -->
    </view>
    <!-- 底部部分 -->
    <view class="bottom" v-if="myApply == 1 && status == 1">
      <view class="right flex">
        <view class="repariing flex">
          <view class="add" @click="urgeClick">催办</view>
          <view class="add" @click="withdrawClick">撤回报障</view>
          <view class="add" @click="hurdleClick">修改报障信息</view>
        </view>
      </view>
    </view>
    <view class="bottom" v-else-if="status <= 2 && myApply != 1">
      <view class="right flex">
        <view class="repariing flex">
          <view :class="['add', status == 1 ? 'multiline' : '']" @click="closePlan(1)">
            <text :style="status == 1 ? 'font-weight: bold;' : ''">关闭报障</text>
            <text v-if="status == 1">(审核不通过)</text>
          </view>
          <view :class="['add', status == 1 ? 'multiline' : '']" @click="toChooseMbs">
            <text :style="status == 1 ? 'font-weight: bold;' : ''">{{
              status == 1 ? "分配任务" : "重新分配任务"
            }}</text>
            <text v-if="status == 1">(审核通过)</text>
          </view>
          <view class="add" @click="hurdleClick">修改报障信息</view>
        </view>
      </view>
    </view>
    <view class="bottom" v-else-if="status > 2 && status <= 4">
      <view class="detail" @click="toPlanDetail">查看任务详情 </view>
    </view>
    <!-- 弹窗提示 -->
    <model title="提示" @cancle="cancle" @comfire="comfire" :visible="visibleShow">
      <view class="comfirBox">
        <view>是否确认撤回报障申请？</view>
        <view class="tips">注:报障撤回后任务将关闭</view>
      </view>
    </model>
    <!-- 弹窗提示 -->
    <model title="关闭提示" @cancle="(closeShows = false), (closeDesc = '')" @comfire="closePlan(2)" :visible="closeShows">
      <view class="comfirBox">
        <view>是否关闭维修任务？</view>
        <view class="areaBox">
          <textarea v-model="closeDesc" @blur="bindTextAreaBlur($event)" maxlength="100" placeholder="请输入关闭原因" />
          <view class="info_num">{{ closeDesc.length }}/100</view>
        </view>
      </view>
    </model>
    <uni-popup ref="uni-popup" type="bottom" background-color="#fff">
      <view class="main">
        <view class="popup-content">
          <view class="downs" @click="close">
            <view class="downs-btn"></view>
          </view>
          <view class="title"> 故障信息 </view>
          <view class="subMain">
            <view class="subTitle">报障状态</view>
            <view class="subMainContent">
              <view :class="[
                'subMainContent_item',
                item.val == elevatorStop ? 'active' : '',
              ]" @click="chooseStatus(item)" v-for="(item, index) in [
                  { title: '正常运行', val: 1 },
                  { title: '停梯', val: 2 },
                ]" :key="index">{{ item.title }}</view>
            </view>
            <view class="subTitle">报障状态</view>
            <view class="subMainContent">
              <view :class="[
                'subMainContent_item',
                problemItem.includes(item.dictKey) ? 'active' : '',
              ]" @click="clickFaultItem(item, index)" v-for="item in falutList" :key="item.dictKey">{{ item.dictValue
                }}</view>
            </view>
            <input type="text" v-if="problemItem.includes(this.otherId)" placeholder="请输入其他故障现象" class="other"
              v-model="problemOtherDesc" />
          </view>
        </view>
        <view class="popupbottom">
          <view class="submit" @click="comfireChangeStatus">确定</view>
        </view>
      </view>
    </uni-popup>
    <previewMedia ref="previewMedia"></previewMedia>
  </view>
</template>

<script>
import ImageDragSort from '@/components/image-drag-sort/img-and-video.vue';
import stautsStep from '@/components/status-special/status-special.vue';
import model from '@/components/model/index.vue';
import UserList from './componets/user-list.vue';
import {
	repairPlanDetailNew,
	approvePlan,
	closePlan,
	updataRemark,
	repairReminder,
	repairCancel,
} from '@/apis/approve.js';
import { getPlanDetail } from '@/apis/workOrder.js';
import { getSelectWorkTracks } from '@/apis/taskStepPage.js';
import { mapState, mapActions } from 'vuex';
import { elevtorDetail } from '@/apis/elevator.js';
import { problemItem, updateWork } from '@/apis/barrierSearch.js';
import GlobalNavBar from '@/components/uni-nav-bar/global-nav-bar';
export default {
	components: {
		GlobalNavBar,
		stautsStep,
		// ElevtorCard,
		// dropdown,
		ImageDragSort,
		UserList,
		model,
	},
	data() {
		return {
			// 展开收起 具体描述
			showDescBtn: true,
			// 紧急程度标签
			btnBoxList: [
				{ color: '#0091FF', bgColor: '#dcf0ff', label: '较低', key: '4' },
				{ color: '#F7B500', bgColor: '#fff7e1', label: '普通', key: '3' },
				{ color: '#fa6400', bgColor: '#ffecdf', label: '紧急', key: '2' },
				{ color: '#e02020', bgColor: '#ffecec', label: '非常紧急', key: '1' },
			],
			mheight: 0,
			approveList: [
				{
					// url: "/static/images/beAssigned.png",
					url: 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20240118/a9bae39220f58e0c3799b9b5f4fdb3c7.png',
				},
				{
					url: 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20240118/a9c44724b6f996dba5f19a97d10510b7.png',
				},
				{
					url: 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20240118/d7a8dd9bb0438165303085145258bac8.png',
				},
				{
					url: 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20240118/7395cb4bbc64ec640e503cc995e13872.png',
				},
				{
					url: 'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20240118/6d92c73492bdfd004fa7479913b4c5b2.png',
				},
			],
			firstTextEdit: false,
			textValEdit: false,
			// 处理反馈内容
			textVal: '',
			workOrderDetail: {
				// 故障信息
				faultMessageVO: {},
				// 报障信息
				faultReportVO: {},
				// 故障原因
				faultReasonVO: {},
				// 维修详情最后一次任务
				lastPlan: {},
				planContentUsers: [],
			},
			// 工单详情
			signType: 'in',
			elevatorId: '',
			// 任务状态详情
			planDetail: {},
			// 我自己是否还未签退
			isPlanStatus: false,
			userSignCount: 0,
			showPoupup: false,
			options: [
				{
					status: 2,
					name: '待开始',
					icon: '/static/images/step1.png',
				},
				{
					status: 3,
					name: '维修中',
					icon: '/static/images/step2.png',
				},
				{
					status: 4,
					name: '已完成',
					icon: '/static/images/step3.png',
				},
			],

			status: '',
			elevatorDetail: {},
			elevatorStop: '',
			planId: '',
			lastPlan: {},
			isEditFlag: false,
			imgaddress: '',
			stepList: [],
			isFull: false,
			logs: [],
			problemOtherDesc: '',
			businessApproveId: '',
			// 我的申请页面
			myApply: null,
			visibleShow: false,
			title: '',
			// 救援工单详情页面
			myRescue: true,
			// 救援工单禁止反馈处理编辑
			isUpdata: true,
			// 处理反馈 显示
			showTextVal: true,
			falutList: [],
			// 选择故障集合
			problemItem: [],
			otherId: '',

			malFunctionHistories: [],
			// 关闭原因弹窗
			closeShows: false,
			closeDesc: '',
		};
	},
	onLoad(e) {
		console.log(e, 'e的值');
		if (e.title) {
			this.title = e.title;
		} else if (e.myApply == 1) {
			this.title = '报障申请详情';
		} else {
			this.title = '报障审批详情';
		}
		this.planId = e.planId;
		this.elevatorId = e.elevatorId;
		this.businessApproveId = e.businessApproveId;
		this.myApply = Number(e.myApply);
		if (e.myRescue) {
			this.myRescue = false;
			this.isUpdata = false;
		} else {
			this.myRescue = true;
			this.isUpdata = true;
		}
		this.getProblemItem();
		this.initData();
		// this.getDetail();
	},
	async onShow() {
		await this.handleRreshToken();
		let elevatorData = uni.getStorageSync('elevatorData');
		if (elevatorData) {
			this.planId = elevatorData.planId;
			this.elevatorId = elevatorData.elevatorId;
		}
		if (!this.userinfo.user_id) {
			uni.showModal({
				title: '提示',
				content: '检测到您未登录或登录已失效，请前往登录后在操作',
				showCancel: false,
				success: () => {
					uni.navigateTo({
						url: '../login/index',
					});
				},
			});
			return;
		}
	},
	watch: {
		watch: {
			problemItem: {
				deep: true,
				handler(newVal) {
					// console.log(newVal)
					if (!newVal.includes(this.otherId)) {
						this.problemOtherDesc = '';
					}
				},
			},
		},
	},
	computed: {
		...mapState('user', ['userinfo']),
		// showAddBtn() {
		//   return (
		//     this.status == 1 &&
		//     this.workOrderDetail.faultMessageVO &&
		//     workOrderDetail.faultMessageVO.elevatorStop == null
		//   );
		// },
	},
	methods: {
		...mapActions('user', ['handleRreshToken']),
		// 判断具体描述 是否展示 收起展开操作
		showDesc(row) {
			if ((JSON.stringify(row.mfDesc).match(/\\n/g) || []).length >= 2) {
				return true;
			}
			return false;
		},
		// 过滤维修记录数组
		filterateList(row) {
			return this.malFunctionHistories.filter((item) => item.worksId == row.id);
		},
		// 联系报障人
		callPhone(item) {
			uni.showModal({
				title: '报障人联系信息',
				content: `${item.name}\r\n${item.phone}`,
				showCancel: true,
				confirmColor: '#0091FF',
				cancelColor: '#000000',
				confirmText: '拨打',
				success: function (res) {
					if (res.confirm) {
						uni.makePhoneCall({
							phoneNumber: item.phone,
						});
					}
				},
			});
		},
		// 处理结果 展开收起
		ShowMore(item, index) {
			item.more = !item.more;
			this.$set(this.workOrderDetail.faultMessageList, index, { ...item });
		},
		// 处理结果 展开收起 记录
		resultShowMore(item) {
			item.isShowMore = !item.isShowMore;
		},
		chooseStatus(item) {
			this.elevatorStop = this.elevatorStop == item.val ? '' : item.val;
			console.log(this.elevatorStop);
		},
		changeStatus() {
			this.$refs['uni-popup'].open();
			this.elevatorStop = this.workOrderDetail.faultMessageVO.elevatorStop;
			this.problemItem =
        this.workOrderDetail.faultMessageVO.problemItem == '' ? [] : this.workOrderDetail.faultMessageVO.problemItem.split(',');
			if (this.problemItem.includes(this.otherId)) {
				this.problemOtherDesc =
          this.workOrderDetail.faultMessageVO.problemOtherDesc;
			}
		},
		// 获取现象集合
		getProblemItem() {
			problemItem({}).then((res) => {
				if (res) {
					console.log(res, '集合');
					this.falutList = res.data;
					this.otherId = this.falutList.find(
						(item) => item.dictValue === '其他'
					).dictKey;
					// console.log(this.otherId ,"this.otherId ")
				}
			});
		},
		// 选择故障现象
		// 点击现象选择
		clickFaultItem(item) {
			// console.log(item,index)
			if (!this.problemItem.includes(item.dictKey)) {
				this.problemItem.push(item.dictKey);
			} else {
				let faultIndex = this.problemItem.findIndex((e) => e == item.dictKey);
				this.problemItem.splice(faultIndex, 1);
			}
		},
		close() {
			this.$refs['uni-popup'].close();
		},
		// 确定对话框按钮
		comfireChangeStatus() {
			uni.showLoading({
				title: '加载中',
				icon: 'none',
			});
			if (this.problemItem.includes(this.otherId) && !this.problemOtherDesc) {
				uni.showToast({
					title: '请填写其他故障现象',
					icon: 'none',
					mask: true,
				});
				return;
			}
			updateWork({
				planId: this.planId,
				problemItem: this.problemItem.join(','),
				problemOtherDesc: this.problemOtherDesc,
				elevatorStop: this.elevatorStop,
			}).then(() => {
				uni.hideLoading();
				this.$refs['uni-popup'].close();
				this.getDetail();
			});
		},
		setHeight(n) {
			this.mheight = n;
		},
		updataTextVal() {
			this.textValEdit = true;
		},
		// 任务追踪页面
		goTaskSetpPage() {
			console.log(this.planId, this.elevatorDetail.id);
			// return
			uni.navigateTo({
				url: `/pageModules/taskStepPage/taskStepPage?planId=${this.planId}&elevatorId=${this.elevatorDetail.id}&state=1`,
				fail: (err) => {
					console.log(err);
				},
			});
		},
		// 查看维修详情
		toPlanDetail() {
			uni.navigateTo({
				url:
          '/subpages/repair/repariDetail?planId=' +
          this.planId +
          '&elevatorId=' +
          this.elevatorId,
			});
		},
		// 重置编辑操作
		reTextVal() {
			this.textVal = this.workOrderDetail.faultFeedbackVO.remark || '';
			this.textValEdit = false;
		},
		async saveTextVal() {
			if (!this.textVal) {
				uni.showToast({
					title: '请填写内容',
					icon: 'none',
				});
				return;
			}
			uni.showLoading({
				title: '提交中',
				mask: true,
			});
			await this.updataRemark();
			this.textValEdit = false;
			this.initData();
		},
		// 情况处理反馈
		removeText() {
			uni.showModal({
				title: '提示',
				content: '是否清空处理反馈?',
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({
							title: '提交中',
							mask: true,
						});
						this.textVal = '';
						updataRemark({
							id: this.businessApproveId,
							remark: this.textVal,
						}).then(() => {
							uni.hideLoading();
							uni.showToast({
								title: '提交成功',
							});
							setTimeout(() => {
								this.initData();
							}, 700);
						});
					}
				},
			});
		},
		// 更新处理反馈
		updataRemark() {
			return new Promise((resolve) => {
				updataRemark({
					id: this.businessApproveId,
					remark: this.textVal,
				}).then(() => {
					resolve();
				});
			});
		},
		// 去选择人员
		async toChooseMbs() {
			uni.showLoading({
				title: '请稍后',
				mask: true,
			});
			if (this.textValEdit == true && this.textVal) {
				await this.updataRemark();
			}
			let obj1 = {
				approveStatus: 2,
				id: this.businessApproveId,
				remark: this.textVal
			};
			let obj2 = {
				id: this.businessApproveId,
				planId: this.planId,
				elevatorId: this.elevatorId,
			};
			uni.setStorage({
				key: 'approve',
				data:
          this.status == 1 ? obj1 : obj2,
				success: () => {
					uni.hideLoading();
					uni.navigateTo({
						url:
              '/pageModules/myApplication/assignTasks?id=' +
              this.businessApproveId,
					});
				},
			});
		},
		bindTextAreaBlur(e) {
			if (e.detail.value) {
				this.closeDesc = e.detail.value;
			} else {
				this.closeDesc = '';
			}
		},
		// 关闭报障
		closePlan(type) {
			// 审核通过 待开始 关闭报障

			if (this.status == 2 && !this.closeDesc && type === 2) {
				uni.showToast({
					title: '请输入关闭原因',
					icon: 'none',
				});
				return;
			}
			if (this.status == 2 && this.closeDesc && type === 2) {
				uni.showLoading({
					title: '提交中',
					mask: true,
				});
				closePlan(this.businessApproveId, this.planId, this.closeDesc).then(
					() => {
						uni.hideLoading();
						uni.showToast({
							title: '关闭成功',
							icon: 'none',
						});
						this.closeShows = false;
						this.closeDesc = '';
						setTimeout(() => {
							this.initData();
						}, 700);
					}
				);
				return;
			}
			if (this.status == 2 && type === 1) {
				this.closeShows = true;
				return;
			}
			// 审核不通过
			uni.showModal({
				content: '是否审核不通过，关闭报障任务?',
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({
							title: '提交中',
							mask: true,
						});
						approvePlan({
							approveStatus: 3,
							id: this.businessApproveId,
							remark: this.textVal,
						}).then(() => {
							uni.hideLoading();
							uni.showToast({
								title: '审核不通过',
								icon: 'none',
							});
							setTimeout(() => {
								this.initData();
							}, 700);
						});
					}
				},
			});
		},
		callTelPhone(num) {
			uni.makePhoneCall({
				phoneNumber: num,
			});
		},
		// 获取任务跟踪进度条
		getSelectWorkTracks() {
			return new Promise((resolve) => {
				getSelectWorkTracks({ planId: this.planId }).then((res) => {
					let workLogs = res.data.workLogs;
					let logs = [];
					for (let i = 0; i < this.options.length; i++) {
						let createTime = '';
						for (let j = 0; j < workLogs.length; j++) {
							if (workLogs[j].planStatus == this.options[i].status) {
								createTime = workLogs[j].createTime;
								break;
							}
						}
						logs.push({ createTime });
					}
					this.logs = logs;
					// this.$forceUpdate();
					resolve();
				});
			});
		},
		// 任务状态详情，维保员列表等信息
		getPlanDetail() {
			return new Promise((resolve) => {
				getPlanDetail({ planId: this.planId }).then((res) => {
					this.planDetail = res.data;
					this.status = res.data.status;
					if (this.status == 7) {
						this.options = [
							{
								status: 2,
								name: '待开始',
								icon: '/static/images/step1.png',
							},
							{
								status: 7,
								name: '已关闭',
								icon: '/static/images/step4.png',
							},
						];
					}
					this.getSelectWorkTracks();
					resolve();
				});
			});
		},

		// 任务追踪页面
		// goTaskSetpPage() {
		//   this.elevatorDetail.planId = this.planId;
		//   uni.navigateTo({
		//     url:
		//       "/pageModules/taskStepPage/taskStepPage?obj=" +
		//       JSON.stringify(this.elevatorDetail) +
		//       "&state=" +
		//       1,
		//   });
		// },
		updataShowFuc(val) {
			this.showPoupup = val;
		},
		handleBack() {
			// console.log(11)
			uni.navigateBack({});
		},
		async initData() {
			uni.showLoading({
				title: '加载中',
				icon: 'none',
			});
			await this.getPlanDetail();

			this.getDetail();
			elevtorDetail({ elevatorId: this.elevatorId }).then((res) => {
				if (res) {
					console.log(res);
					this.elevatorDetail = res.data;
					this.isFull = res.data.isFull;
					uni.hideLoading();
				}
			});
		},
		// 获取维修详情
		getDetail() {
			uni.showLoading({
				title: '加载中',
				icon: 'none',
			});
			// showTextVal是否展示处理反馈
			return new Promise((resolve) => {
				repairPlanDetailNew({ planId: this.planId }).then((res) => {
					console.log('repairPlanDetailNew', res);
					if (res) {
						this.workOrderDetail = res.data;
						this.workOrderDetail.faultMessageList.forEach((item) => {
							// 维修记录 收起展开
							item.more = false;
							// 维修记录 记录人收起展开
							item.isShowMore = false;
							item.malfunctionRecordVO.reverse();
						});
						if (!this.workOrderDetail.faultReportVO.name) {
							// 默认取第一个报障人信息和报障渠道
							let item = this.workOrderDetail.faultMessageList[0];
							this.workOrderDetail.faultReportVO.name = item.name;
							this.workOrderDetail.faultReportVO.phone = item.phone;
							this.workOrderDetail.faultReportVO.planFromName =
                item.planFromName;
							this.workOrderDetail.faultReportVO.planFrom = item.planFrom;
						}
						if (
							this.workOrderDetail.workOrderType == 1 &&
              !this.workOrderDetail.sourcePlanTypeName
						) {
							this.workOrderDetail.sourcePlanTypeName = '维修';
						}
						if (res.data.malFunctionHistories) {
							res.data.malFunctionHistories.forEach((item) => {
								// 处理结果 记录人收起展开
								item.isShowMore = false;
							});
							this.malFunctionHistories = res.data.malFunctionHistories;
						}
						// console.log(res.data, "8888")
						// 反馈处理显示逻辑 this.myApply=1 我的申请 2=>我的审批
						// 如果是我的申请(维保员)
						// console.log(this.myApply,this.workOrderDetail.faultFeedbackVO.remark,999999)
						// 初始化状态
						this.textValEdit = false;
						if (
							this.myApply == 1 &&
              !this.workOrderDetail.faultFeedbackVO.remark
						) {
							console.log(1);
							this.firstTextEdit = false;
							this.showTextVal = false;
						}
						if (
							this.myApply != 1 &&
              this.status == 1 &&
              !this.workOrderDetail.faultFeedbackVO.remark
						) {
							console.log(2);
							this.firstTextEdit = true;
							this.textValEdit = true;
						}
						if (
							this.myApply != 1 &&
              this.status >= 2 &&
              !this.workOrderDetail.faultFeedbackVO.remark
						) {
							console.log(3);
							this.firstTextEdit = false;
							this.showTextVal = false;
						}
						// else if (
						//   (this.myApply == 1 &&
						//   this.stauts!=1&&
						//   this.workOrderDetail.faultFeedbackVO==null)||(this.myApply == 1 &&this.workOrderDetail.faultFeedbackVO.remark==null&&this.stauts!=1)
						// ) {
						//   this.firstTextEdit = false;
						//   this.showTextVal = false;
						// }
						if (res.data.preTime) {
							var curDate = new Date(res.data.preTime);
							var y = curDate.getFullYear();
							var m = curDate.getMonth() + 1;
							var d = curDate.getDate();
							var h = curDate.getHours();
							h = h < 10 ? 12 + h : h;
							var minute = curDate.getMinutes();
							minute = minute < 10 ? '0' + minute : minute;
							res.data.preTime = [`${y}年${m}月${d}日`, ` ${h}:${minute}`];
						}
						this.textVal =
              (res.data.faultFeedbackVO && res.data.faultFeedbackVO.remark) ||
              '';
						uni.hideLoading();
					}
					resolve(res.data.elevatorDetail);
				});
			});
		},

		// 验证是否有权限

		getPlanRole() {
			console.log(this.planDetail);
			let next = false;
			for (let i = 0; i < this.planDetail.users.length; i++) {
				if (this.planDetail.users[i].userId == this.userinfo.user_id) {
					next = true;
					break;
				}
			}
			if (!next) {
				uni.showModal({
					title: '提示',
					content: '你没有权限操作该任务',
					showCancel: false,
				});
			}
			return next;
		},

		// 图片上传
		changeImg(list) {
			console.log('上传图片', list);
			if (list.length > 0) {
				this.imgaddress = list[0];
				this.signImg = list;
			} else {
				this.signImg = list;
			}
		},

		// 关闭提交按钮
		handleSubmit() {
			// this.showAddDialog=false
			this.$refs.popup.close();
			this.aa = '1';
			this.getDetail();
		},
		// 拨打电话
		handleCall(index) {
			uni.makePhoneCall({
				phoneNumber: index === 0 ? this.elevatorDetail.phone : '0760-88814888',
			});
		},

		// 多人维修检查状态
		handleDone() {
			console.log('工单完成');
			uni.showToast({
				title: '工单状态已更新,请重新进入页面',
				icon: 'none',
			});
			setTimeout(() => {
				uni.navigateBack({});
			}, 500);
		},
		// 催办
		urgeClick() {
			repairReminder({ businessApproveId: this.businessApproveId }).then(
				(res) => {
					if (res.code === 200) {
						uni.showToast({
							title: '催办成功',
							icon: 'none',
						});
					}
				}
			);
		},
		// 撤回报障
		comfire() {
			repairCancel({ businessApproveId: this.businessApproveId }).then(
				(res) => {
					if (res.code === 200) {
						this.visibleShow = false;
						uni.showToast({
							title: '撤回成功',
							icon: 'none',
						});
						setTimeout(() => {
							this.initData();
						}, 700);
					}
				}
			);
		},
		cancle() {
			this.visibleShow = false;
		},
		withdrawClick() {
			this.visibleShow = true;
		},
		// 跳转修改报障信息
		hurdleClick() {
			uni.navigateTo({
				url:
          '/subpages/approve/repairHurdle?planId=' +
          this.planId +
          '&buildingName=' +
          this.elevatorDetail.buildingName +
          '&elevatorAddress=' +
          this.elevatorDetail.elevatorAddress +
          '&elevatorId=' +
          this.elevatorId,
			});
		},
	},
};
</script>
<style>
page {
  height: 100%;
  background-color: #f3f6f8;
  font-size: 28rpx;
}
</style>

<style lang="scss" scoped>
/deep/ .header_s {
  padding-bottom: 20rpx !important;
}

.main {
  background: #fff;

  .popup-content {
    background: #fff;
    background: #ffffff;
    border-radius: 8rpx 8rpx 0rpx 0rpx;
    box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
    padding: 20rpx 40rpx 0 40rpx;

    .downs {
      width: 100%;
      height: 48rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .downs-btn {
        width: 64rpx;
        height: 10rpx;
        background: #d8d8d8;
        border-radius: 6rpx;
        margin: 0 auto;
      }
    }

    .title {
      font-weight: 500;
      font-size: 32rpx;
      color: #333;
    }

    .subMain {
      padding-bottom: 44rpx;

      .subTitle {
        font-size: 30rpx;
        color: #333;
        font-weight: 500;
        margin-top: 52rpx;
      }

      .other {
        width: 670rpx;
        height: 72rpx;
        border: 2rpx solid #e9e9e9;
        border-radius: 8rpx;
        padding-left: 24rpx;
        font-size: 26rpx;
        margin-top: 24rpx;
      }

      .subMainContent {
        display: flex;
        flex-wrap: wrap;

        .subMainContent_item {
          width: 214rpx;
          height: 48rpx;
          border: 2rpx solid #cccccc;
          border-radius: 8rpx;
          color: #666;
          display: flex;
          font-size: 28rpx;
          justify-content: center;
          align-items: center;
          margin-top: 16rpx;
        }

        .active {
          color: #0091ff;
          border-color: #0091ff;
        }

        .subMainContent_item:nth-child(3n + 2) {
          margin: 16rpx 8rpx 0 8rpx;
        }
      }
    }
  }

  .popupbottom {
    height: 110rpx;

    border-top: 2rpx solid #eee;

    .submit {
      width: 670rpx;
      height: 70rpx;
      background: #0091ff;
      border-radius: 8rpx;
      background: #0091ff;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 14rpx 40rpx;
    }
  }
}

.navbar {
  position: sticky;
  z-index: 300;
  top: 0;
  left: 0;
}

.rePair_detail {
  .nav {
    position: sticky;
    top: 0;
    z-index: 102;

    image {
      width: 750rpx;
      height: 354rpx;
      position: absolute;
      top: 0;
    }
  }

  .header {
    // height: 160rpx;
    padding-left: 40rpx;
    padding-right: 32rpx;
    margin-bottom: 32rpx;
    padding-top: 28rpx;
    // margin-top: 20rpx;
    // background: linear-gradient(0deg, rgba(0, 145, 255, 0) 0%, rgba(0, 145, 255, 0.15) 100%);
  }

  .task_item {
    .falutItem {
      align-items: center;
      margin-bottom: 20rpx;

      .label {
        width: 170rpx !important;
      }
    }
  }

  .content_box {
    padding: 0 20rpx;
    background-color: #f3f6f8;
    padding-bottom: 150rpx;
    position: relative;
    z-index: 105;

    // z-index: 100;
    .content_item {
      margin-bottom: 20rpx;
      padding: 28rpx 20rpx;
      border-radius: 8rpx;
      position: relative;
      background: #ffffff;

      .top_left {
        font-size: 21px;
        color: #333333;
        font-weight: bold;
      }

      .title {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
        padding-bottom: 22rpx;
        display: flex;
        align-items: center;

        &::before {
          content: "";
          display: inline-block;
          width: 4rpx;
          height: 32rpx;
          background-color: #0091ff;
          margin-right: 10rpx;
        }
      }

      .descBox {
        padding-bottom: 20rpx;

        image {
          width: 32rpx;
          height: 32rpx;
        }

        .title {
          font-weight: normal !important;
          font-size: 28rpx !important;
          color: #999 !important;
          padding-bottom: 6rpx !important;
        }

        .reson {
          padding-top: 4rpx;
        }

        .content {
          font-size: 28rpx !important;
          color: #333;
          width: 500rpx;
        }
      }

      .otherBox {
        .title {
          padding-bottom: 0 !important
        }

        view:nth-child(2) {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
        }

        .college {
          text-align: right;
          color: #0091ff;
          white-space: nowrap
        }
      }

      .faultImg {
        display: flex;
        flex-wrap: wrap;

        // margin: 20rpx 0;
        image {
          width: 120rpx;
          height: 120rpx;
          margin-right: 18rpx;
        }
      }

      .label {
        margin-right: 24rpx;
        color: #999999;
        font-size: 28rpx;
        width: 140rpx;
      }

      .falutItem {
        display: flex;
        // align-items: center;

        .status {
          padding: 4rpx 16rpx;
          border-radius: 8rpx;
          font-size: 26rpx;
        }

        .stops {
          border: 2rpx solid #e02020;
          color: #e02020;
          margin-right: 12rpx;
        }

        .normal {
          border: 2rpx solid #0091ff;
          color: #0091ff;
          margin-right: 12rpx;
        }

        .tag {
          border: 2rpx solid transparent;
        }
      }

      .status_content {
        display: flex;
        flex-wrap: wrap;
        flex: 1;

        .status {
          padding: 4rpx 16rpx;
          border-radius: 8rpx;
          font-size: 26rpx;
          margin-bottom: 12rpx;
          margin-left: 4rpx;
        }

        .stops {
          border: 2rpx solid #e02020;
          color: #e02020;
          margin-right: 12rpx;
        }

        .normal {
          border: 2rpx solid #0091ff;
          color: #0091ff;
          margin-right: 12rpx;
          margin-bottom: 12rpx;
        }
      }

      .orderfalutDes {
        :nth-child(1) {
          width: 200rpx;
        }

        margin-top: 20rpx;
        margin-bottom: 20rpx;
      }

      .time {
        color: #999;
        font-size: 28rpx;
        margin-top: 40rpx;
      }

      .addBtn {
        width: 116rpx;
        height: 44rpx;
        border: 2rpx solid #cccccc;
        border-radius: 8rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #333;
        font-size: 26rpx;

        image {
          width: 24rpx;
          height: 24rpx;
          margin-right: 6rpx;
        }
      }

      .editBtn {
        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 6rpx;
          margin-top: 6rpx;
        }
      }

      .userBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 22rpx;

        .title {
          padding-bottom: 0;
        }

        view:nth-child(2) {
          color: #666666;
          font-size: 12px
        }
      }
    }

    .repter {
      padding-left: 0;
      padding-bottom: 10rpx;
    }

    .relust {
      padding-left: 0;
    }

    .closeBox {
      padding-left: 0;
      padding-bottom: 10rpx
    }

    .eleInfo {
      margin-top: 20rpx;
      background-color: #f3f6f8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0;

      .top {
        padding-left: 20rpx;
        display: flex;
        flex-direction: column;
        flex: 1;

        view:nth-child(2) {
          color: #999;
          font-size: 12px;
          margin-top: 5px;
        }
      }

      image {
        width: 144rpx;
        height: 144rpx;
      }
    }

    .message {
      margin-bottom: 20rpx;
      padding: 28rpx 20rpx;
      border-radius: 8rpx;
      background: #ffffff;
      padding-bottom: 0rpx;

      .title {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
        padding-bottom: 22rpx;
      }

      .des {
        margin-bottom: 20rpx;

        .desItem {
          display: flex;
        }

        .flexBox {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          margin-bottom: 20rpx;

          .title {
            display: flex;
            align-items: center;
            padding-bottom: 0;

            &::before {
              content: "";
              display: inline-block;
              width: 4rpx;
              height: 32rpx;
              background-color: #0091ff;
              margin-right: 10rpx;
            }
          }

          .title_desc {
            width: 170rpx;
            font-weight: normal !important;
            font-size: 28rpx !important;
            color: #999 !important;
            margin-right: 20rpx;
            padding: 0
          }

          .btn {
            width: 120rpx;
            margin-left: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 22rpx;
          }

          .reportingName {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: #666666;
            background: #dcf0ff;
            border-radius: 4rpx;
            padding: 0rpx 16rpx;
            margin-top: 2rpx;
          }
        }

        .descBox {
          display: flex;
          align-items: flex-start;
          padding-bottom: 20rpx;

          image {
            width: 32rpx;
            height: 32rpx;
          }

          .title {
            width: 170rpx;
            font-size: 28rpx !important;
            color: #999 !important;
            padding: 0 !important;
            font-weight: normal !important;
            margin-right: 20rpx;
            text-align: left;
          }

          .content {
            font-size: 28rpx !important;
            color: #333;
            // width: 550rpx;
            word-break: break-all;
          }

          .noWrap {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .tabs {
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-left: -20rpx;
            margin-right: -20rpx;
            border-bottom: 2rpx solid #eee;

            &_item {
              font-size: 26rpx;
              color: #93b1c7;
              padding-bottom: 20rpx;

              .badge {
                display: inline-block;
                width: 28rpx;
                height: 28rpx;
                line-height: 28rpx;
                border-radius: 50%;
                background: #6dd400;
                color: #fff;
                font-size: 24rpx;
                text-align: center;
                font-weight: normal;
                margin-left: 10rpx;
              }
            }

            .active {
              color: #0091ff;
              font-size: 30rpx;
              font-weight: bold;
              padding-bottom: 20rpx;
              border-bottom: 4rpx solid #0091ff;
            }
          }

          .addBtn {
            background: #fff;
            color: #0091ff;
            border: 2rpx solid #0091ff;
            border-radius: 8rpx;
            margin-top: 20rpx;
            padding: 18rpx 0;
            display: flex;
            align-items: center;
            justify-content: center;

            image {
              width: 24rpx;
              height: 24rpx;
              margin-top: 4rpx;
              margin-right: 10rpx;
            }
          }

          .disableBtn {
            color: #cccccc;
            border: 2rpx solid #cccccc;
          }

          .reasonBox {
            border: 2rpx solid #e02020;
          }

          .moreBox {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 20rpx;

            .icon {
              display: inline-block;
              width: 12rpx;
              height: 12rpx;
              line-height: 20rpx;
              border-left: 2rpx #999999 solid;
              border-bottom: 2rpx #999999 solid;
              transform: rotate(-45deg);
              margin-right: 12rpx;
            }

            text:nth-last-child(1) {
              font-size: 26rpx;
              color: #999999;
            }
          }
        }

        .noPadding {
          padding: 0;
        }

        .partName {
          font-size: 28rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: flex;
          flex-wrap: wrap;
        }

        .member {
          color: #999;
          font-size: 24rpx;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;

          .memberBox {
            margin-left: 10rpx;

            view {
              margin-bottom: 8rpx;

              text:nth-child(2) {
                margin: 0 10rpx
              }
            }
          }

          .more {
            color: #666666
          }
        }
      }

      .label {
        margin-right: 24rpx;
        color: #999999;
        font-size: 28rpx;
        width: 140rpx !important;
        margin-bottom: 10rpx;
      }

      .status_content {
        display: flex;
        flex-wrap: wrap;
        flex: 1;

        .status {
          padding: 4rpx 16rpx;
          border-radius: 8rpx;
          font-size: 26rpx;
          // margin-bottom: 20rpx;
          margin-left: 4rpx;
        }

        .stops {
          border: 2rpx solid #e02020;
          color: #e02020;
          margin-right: 12rpx;
        }

        .normal {
          border: 2rpx solid #0091ff;
          color: #0091ff;
          margin-right: 12rpx;
          margin-bottom: 12rpx;
        }
      }

      .stop {
        // border: 2rpx solid #e02020;
        color: #333;
        margin-right: 12rpx;
        padding: 4rpx 0;
      }

      .falutItem {
        display: flex;

        .normal {
          border: 2rpx solid #0091ff;
          color: #0091ff;
          margin-right: 12rpx;
        }

        .status {
          padding: 4rpx 16rpx;
          border-radius: 8rpx;
          font-size: 26rpx;
          margin-bottom: 20rpx;
        }

        .stops {
          border: 2rpx solid #e02020;
          color: #e02020;
          margin-right: 12rpx;
        }
      }

      .orderfalutDes {
        :nth-child(1) {
          width: 200rpx;
        }

        margin-bottom: 40rpx;
      }

      .time {
        display: flex;
        color: #999;
        font-size: 28rpx;
        // margin-top: 40rpx;

        .label {
          margin-right: 24rpx;
          color: #999999;
          font-size: 28rpx;
          width: 112rpx;
        }
      }
    }

    .repari_result {
      margin-top: 20rpx;
      background: #ffffff;
      border-radius: 8rpx;
      padding: 0 20rpx;
      padding-bottom: 20rpx;
      box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.2);

      .line {
        display: flex;
        justify-content: center;

        text {
          width: 64rpx;
          height: 10rpx;
          background: #d8d8d8;
          border-radius: 6rpx;
        }
      }

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;

        view:nth-child(1) {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
        }
      }

      .handle {
        // width: 412rpx;
        display: flex;
        height: 100%;

        .handle_item {
          display: flex;
          justify-content: flex-end;
          // width: 100%;
          padding-top: 2rpx;
          box-sizing: border-box;
          width: 290rpx;
        }

        image {
          width: 32rpx;
          height: 32rpx;
          // margin-top: 2rpx;
        }

        .addBtn {
          border-right: 2rpx solid #e9e9e9;
          // justify-content: center;
          padding-right: 12rpx;
          font-size: 12px;
          color: #666666;
          margin: 0 14rpx 0 10rpx;
        }

        .editBtn {
          border-right: 2rpx solid #e9e9e9;
          justify-content: center;
          padding-right: 30rpx;
        }

        .delBtn {
          padding-left: 20rpx;
        }

        view {
          display: flex;
          // flex: 1;
          justify-content: flex-end;
        }

        .saveBtn {
          color: #0091ff;
          width: 100%;
          display: flex;
          align-items: center;
          font-size: 24rpx;

          text {
            margin-left: 4rpx;
          }
        }
      }

      .content_item {
        margin-bottom: 16rpx;

        .name {
          font-size: 26rpx;
          margin-bottom: 16rpx;
          font-weight: bold;
          color: #333;

          text {
            color: #e54b4b;
          }
        }
      }

      .imgBox {
        .name {
          margin-bottom: 16rpx;
          font-size: 26rpx;
          font-weight: bold;
          color: #333;

          text {
            color: #e54b4b;
          }
        }
      }

      .save {
        margin-top: 18rpx;
        display: flex;
        justify-content: center;

        button {
          display: flex;
          width: 670rpx;
          height: 70rpx;
          border-radius: 8rpx;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .faultReasonContent {
      padding: 0 20rpx;
      width: calc(100% - 20rpx);
      position: relative;

      .edit-block {
        z-index: 99;
        position: absolute;
        right: 20rpx;
        top: 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 26rpx;
        color: #999;

        .editIcon {
          margin-right: 5rpx;
        }

        .editVal {
          color: #0091ff;

          image {
            width: 32rpx;
            height: 32rpx;
            margin-right: 7rpx;
            vertical-align: middle;
          }

          text {
            margin: 0 10rpx;
            color: #e9e9e9
          }

          .saveVal {
            color: #ff0000;
          }
        }
      }

      .faultReasonItem {
        margin-bottom: 14rpx;
        width: 100%;
        align-items: center;
        display: flex;

        .label {
          color: #999;
          width: 134rpx;
        }
      }

      .msg {
        font-size: 24rpx;
        color: #999999;
        margin-top: 16rpx;

        view {
          height: 34rpx;
        }
      }

      .textare-content {
        border: 2rpx solid #e9e9e9;
        color: #666;
        font-size: 28rpx;

        textarea {
          height: 200rpx;
          width: calc(100% - 40rpx);
          padding: 20rpx;
        }

        &-length {
          padding: 0 20rpx;
          text-align: right;
          color: #ccc;
          padding-bottom: 10rpx;
        }

        .user-block {
          color: #999;
          font-size: 24rpx;

          margin-top: 10rpx text {
            margin-left: 12rpx
          }
        }
      }
    }

    .progressBar {
      display: flex;
      justify-content: center;
      margin-bottom: 20rpx;

      .progressBar_content {
        width: 710rpx;
        // height: 284rpx;
        background: #ffffff;
        border-radius: 8rpx;
        padding: 24rpx 22rpx 0rpx 18rpx;
        box-sizing: border-box;

        .planEndTime {
          margin-bottom: 10px;
          padding-bottom: 10px;
          border-bottom: 1px solid #e9e9e9;
          font-size: 13px;
          color: #666666;
          display: flex;
          justify-content: space-between;

          text:nth-child(2) {
            color: #0091ff;
          }
        }

        .progressBar_item {
          padding-bottom: 24rpx;
        }
      }
    }
  }

  .close_desc {
    margin-bottom: 8rpx;

    .close_desc_item {
      font-size: 14px;
      color: #333333;
    }

    .close_desc_cont {
      font-size: 12px;
      color: #999999;
    }
  }

  .areaBox {
    padding: 0rpx 8rpx;
    border: 2rpx solid #e9e9e9;
    border-radius: 8rpx;
    margin-top: 16rpx;
    margin-bottom: 24rpx;

    .info_num {
      text-align: right;
      font-size: 24rpx;
      font-weight: 400;
      color: #666666;
      margin-bottom: 2px;
      margin-right: 2px;
    }

    textarea {
      width: 100%;
      height: 90rpx;
    }
  }

  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 200;
    background-color: #fff;
    height: 100rpx;
    width: 100%;
    display: flex;
    border-top: 2rpx solid #eee;

    view {
      // height: 100%;
      display: flex;
      align-items: center;
    }

    .right {
      width: 100%;
      justify-content: space-around;

      .repariing {
        width: 100%;
        justify-content: space-between;

        .multiline {
          padding: 4rpx 0 !important;
        }

        view {
          display: flex;
          // height: 60rpx;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;

          text {
            text-align: center;
            width: 100%;
          }
        }

        view:nth-child(1) {
          background: #f5fbff;
          border-radius: 0rpx 8rpx 8rpx 0rpx;
          color: #0091ff;
        }

        view:nth-child(2) {
          background: #0091ff;
          border-radius: 0rpx 8rpx 8rpx 0rpx;
          color: #fff;
        }
      }
    }

    .add {
      background: #0091ff;
      color: #fff;
      display: flex;
      flex: 1;
      justify-content: center;
      height: 80rpx !important;
      margin: 0 10rpx;
      border-radius: 8rpx !important;
    }

    .detail {
      background: #0091ff;
      color: #fff;
      display: flex;
      width: 90%;
      margin: auto;
      align-items: center;
      justify-content: center;
      height: 70rpx;
    }
  }
}

.serial-num {
  width: 40rpx;
  line-height: 40rpx;
  height: 40rpx;
  text-align: center;
  background: #dcf0ff;
  border-radius: 0px 0px 4rpx 4rpx;
  font-size: 24rpx;
  color: #0091ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 12rpx;
}

.flex-line {
  display: flex;

  &-left {
    box-sizing: border-box;
    flex: 0 0 170rpx;
    width: 0;
    text-align: left;
    padding-right: 20rpx;
  }

  &-right {
    box-sizing: border-box;
    flex: 1;

    text:nth-child(2) {
      margin-left: 40rpx
    }
  }
}

.comfirBox {
  text-align: center;

  .tips {
    color: #e02020
  }
}
</style>
